<template>
	<view class="content">
	 <div class="coupon-list">
	    <van-tabs
	      class="tabsHeader"
	      color="#5189F6"
	      type="line"
		  swipeable
	      @click="onTabsClick"
	      active="tabActive"
	    >
	      <van-tab title="未使用" ></van-tab>
	      <van-tab title="已使用" ></van-tab>
	      <van-tab title="已失效" ></van-tab>
	    </van-tabs>
	    <block v-if="showPage">
	    <div class="coupon_list">
	          <div class="coupon" v-for="(item, index) in conpon_list" :key="index">
	            <div>
	              <div class="shop-coupon">
	                <div
	                  :class="
	                    item.state === 1
	                      ? 'shop-coupon--left red'
	                      : 'shop-coupon--left grey'
	                  "
	                >
	                  <div>{{ item.discount }} <span>元</span></div>
	                  <div v-if="Number(item.threshold)">
	                    满{{ item.threshold }}可用
	                  </div>
	                  <div v-else>无使用门槛</div>
	                </div>
	                <div class="shop-coupon--right">
	                  <div>{{ item.name }}</div>
	                  <div>
	                    <div>开始时间：{{ item.collectionTime }}</div>
	                    <div>结束时间：{{ item.usefulEndTime }}</div>
	                  </div>
	                </div>
	              </div>
	              <div style="padding: 0 0 4vw 4vw" class="van-ellipsis">
	                {{ item.wares ? "可用商品：" + item.wares.name : "通用优惠券" }}
	                <span
	                  v-if="item.isOver === 1"
	                  style="margin-left: 2vw; font-weight: bold"
	                  >已失效</span
	                >
	              </div>
	            </div>
	            <van-divider
	              :style="{
	                color: '#1989fa',
	                borderColor: '#fff',
	                padding: '0 0px',
	              }"
	            >
	            </van-divider>
	          </div>
	        </div>
			
	      <div v-if="conpon_list.length==0" class="emptyDataOfCoupon">
	        <image class="emptyDataOfCouponImg" src="../../static/shop/coupon_empty.png" />
	        <div class="emptyDataOfCouponTip">暂无更多数据</div>
	      </div>
	    </block>
		<view style="display: flex;flex-direction: row;justify-content: center;align-items: center; width: 100vw;position: fixed;left: 0rpx;bottom: 0rpx;padding: 60rpx 0rpx;background: #fff;"> <view class="address-add" @click="addCoupon">添加优惠券</view></view>
	   
		
	  </div>
	  </view>
</template>

<script>
	import api from '../../untils/api.js'
	export default {
		data() {
			return {
			      tabActive: 0, //标签index
			      conpon_list: [],
					  showPage:false,
			}
		},
		onLoad() {
			this.getData();
		},
		onPullDownRefresh() {
		   this.getData();
		   setTimeout(()=>{
		   			uni.stopPullDownRefresh();
		   },1000);
		},
		methods: {
		  addCoupon() {
		        const _that = this;
		        wx.scanCode({
		          success: async (res) => {
					  let obj={couponNum:res.result};
		         const body=  await  api.SM_USER_COUPON_BIND( JSON.stringify(obj))
		         if(body.data.header.result_code==0){
					uni.showToast({
					  title: '优惠券绑定成功！',
					  icon:"none",
					  duration: 3000
					}) 
					setTimeout(()=>{_that.getData();},3000);
				   }  
		          },
				fail:(res)=>{
					uni.showToast({
					  title: '扫码失败',
					  icon:"none",
					  duration: 2000
					}) 
				  },
		        });
		    },
		async  getData(){
			  this.showPage=false;
			  uni.showLoading({
			  	title:"加载中"
			  });
			  var obj={nowPage:1,pageSize:66666,startRecord:0,condition:{oredCriteria:[[{property:"state",value:this.tabActive}]]}}
			await  api.SM_USER_COUPON_LIST_FOR_PAGE(JSON.stringify(obj)).then((res)=>{
				  this.conpon_list=res.data.body.exhibitDatas
			  })
			  this.showPage=true;
			  uni.hideLoading();
		  },
		  onTabsClick(e){
			  this.tabActive=e.detail.index
			  this.getData();
		  }
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: rgb(245,247,249);
		padding-bottom: 170rpx;
	}
    .coupon-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 100%;
      margin-bottom: 30px;
    }
    
    .van-pull-refresh {
      width: 100%;
    }
    
    .van-list {
      width: 100%;
      height: 100%;
      margin-bottom: 20px;
    }
    .coupon_list {
      padding: 30px 10px 0px 10px;
      width: 100%;
      height: 100%;
      > div:nth-of-type(1) {
        margin-top: 30px;
      }
      > div {
        padding-top: 1px;
      }
    }
    .coupon {
      width: 100%;
      height: 100%;
    }
    
    .coupon_line {
      margin: 0 6px;
    }
    
    .item-left {
      flex: 5;
    }
    
    .item-left-top {
      display: flex;
      justify-content: flex-start;
      font-size: 12px;
      color: #3e4752;
      font-weight: bold;
    }
    
    .log-img_1 {
      width: 18px;
      height: 18px;
      background: url(../../static/shop/coupon_1.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 6px;
    }
    .log-img_2 {
      width: 18px;
      height: 18px;
      background: url(../../static/shop/coupon_2.png) no-repeat;
      background-size: 100% 100%;
      margin-right: 6px;
    }
    
    .item-left-middle {
      display: flex;
      align-items: flex-end;
      line-height: 30px;
      font-size: 16px;
    }
    .money_synbol {
      display: flex;
      align-items: flex-top;
      font-size: 11px;
      height: 22px;
    }
    .item-price {
      font-size: 14px;
      color: #333;
      height: 25px;
      font-weight: bold;
    }
    
    .item-title {
      display: flex;
      align-items: flex-top;
      font-size: 16px;
      color: #fff;
      height: 25px;
    }
    .item-left-bottom {
      font-size: 12px;
      color: #b3b3b3;
      font-weight: bold;
    }
    .item-right {
      flex: 2;
      position: relative;
      line-height: 68px;
      font-size: 13px;
      text-align: center;
      transform: translateX(10px);
      color: #faffec;
      border-left: 2px dashed #ededed;
      &::after,
      &::before {
        position: absolute;
        content: "";
        width: 10px;
        height: 10px;
        left: -5px;
        border-radius: 50%;
        background-color: #f5faff;
      }
      &::after {
        top: -15px;
      }
      &::before {
        bottom: -15px;
      }
    }
    
    /*coupon-add-btn*/
    .couupon_add_btn {
      width: 100%;
      height: 49px;
      background-color: #5a9bef;
      position: fixed;
      bottom: 0;
    }
    .li_btn {
      margin-top: 0px;
      width: 100%;
      padding: 0px;
    }
    .add-coupon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .add-synbol {
      position: relative;
      width: 33px;
      height: 33px;
      background-color: #6d81f0;
      border-radius: 50%;
    }
    .x {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 15px;
      height: 2px;
      transform: translate(-50%, -50%);
      background-color: #fff;
    }
    .y {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 2px;
      height: 15px;
      transform: translate(-50%, -50%);
      background-color: #fff;
    }
    .add-title {
      padding-left: 12px;
      text-align: left;
      color: #fff;
      font-size: 16px;
    }
    
    .black {
      margin-top: 4px;
      color: #fff;
      font-size: 15px;
    }
    
    .noMoreData {
      text-align: center !important;
      justify-content: center;
      font-size: 14px;
      margin-top: 10px;
      margin-bottom: 20px;
      background-color: #f5faff !important;
      color: #969799 !important;
    }
    
    /*tab*/
    
    .tabsHeader {
      position: fixed;
      width: 100%;
      z-index: 3;
    }
    
    .color_red {
      color: #e75a45;
    }
    
    .color_grey {
      color: #3e4a58;
    }
    
    .more_grey {
      color: #b3b3b3;
    }
    
    .title_grey {
      color: #3e4752;
    }
    
    .coupon-list .van-tabs__nav--card {
      margin: 0px;
      border: solid 0px #fff;
      height: 36px;
    }
    
    .coupon-list .van-tabs__nav--card .van-tab.van-tab--active {
      color: #fff;
    }
    .coupon-list .van-tabs--card > .van-tabs__wrap {
      height: 36px;
    }
    .van-tabs__nav--card .van-tab {
      border: solid 0px #fff;
      border-bottom: solid 2px #ddd !important;
      background-color: #f2f5fe;
      color: #6279c7;
      line-height: 36px;
      box-shadow: 2px 2px 0px orange !important;
    }
    .van-list__finished-text {
      margin-bottom: 80px;
      padding-bottom: 45px;
    }
    
    /* empty data */
    .emptyDataOfCoupon {
      display: flex;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 330px;
    }
    .emptyDataOfCouponImg {
      width: 238px;
      height: 120px;
      // background: url(../../static/shop/coupon_empty.png) no-repeat;
      // background-size: 100% 100%;
      margin-left: 50%;
      transform: translateX(-50%);
    }
    
    .emptyDataOfCouponTip {
      margin-top: 10px;
      width: 100%;
      text-align: center;
      margin-left: 50%;
      color: #969799;
      transform: translateX(-50%);
      font-size: 14px;
    }
    
    .address-add {
      background: #3b89ed;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      width: 690rpx;
      font-size: 4.6vw;
	  border-radius: 50rpx;
    }
    
    .coupon {
      background: #fff;
    }
    .shop-coupon {
      background: #fff;
      margin-top: 4vw;
      padding: 4vw;
      border-radius: 4vw;
      display: flex;
      align-items: center;
      .shop-coupon--left {
        width: 25vw;
        text-align: center;
        & > div:first-child {
          font-size: 6vw;
          font-weight: bold;
          span {
            font-size: 4vw;
            font-weight: 500;
          }
        }
        & > div:last-child {
          margin-top: 2vw;
        }
      }
      .red {
        color: #ee0a24;
      }
      .grey {
        color: #999999;
      }
      .shop-coupon--right {
        display: flex;
        flex-direction: column;
        width: 61vw;
        margin-left: 2vw;
        font-weight: blod;
        & > div:first-child {
          color: #333333;
          font-weight: bold;
          font-size: 4vw;
        }
        & > div:last-child {
          font-weight: 500;
          font-size: 3.5vw;
          margin-top: 2vw;
          line-height: 5vw;
        }
      }
    }
    
    .noMoreData {
      text-align: center !important;
      justify-content: center;
      font-size: 14px;
      margin-top: 10px;
      margin-bottom: 60px;
      background-color: #f5faff !important;
      color: #969799 !important;
    }
</style>
